<script setup>
import { onMounted } from 'vue'
import CompoVideo from './components/CompoVideo.vue'
onMounted(() => {
  if (document.documentElement.clientWidth / document.documentElement.clientHeight >= 1.7) {
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth * 9 + document.documentElement.clientHeight * 16) /
        2500 +
      'px'
  } else {
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth * 7 + document.documentElement.clientHeight * 12) /
        1800 +
      'px'
  }
})
</script>

<template>
  <div class="main_container">
    <div class="video01">
      <CompoVideo video-src="video01.mp4"></CompoVideo>
    </div>
    <div class="video02">
      <CompoVideo video-src="vieo02.mp4"></CompoVideo>
    </div>
  </div>
</template>

<style>
.main_container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  .video01 {
    width: 48vw;
    height: 27vw;
    position: absolute;
    left: 0;
    top: 0;
  }
  .video02 {
    width: 32vw;
    height: 18vw;
    position: absolute;
    left: 0;
    top: 27vw;
  }
}
</style>
